<template>
  <div>
    <div class="bigBox">
      <!-- 置顶栏 -->
      <div class="RoomMesgTop">
        <van-nav-bar  :title="CityMesgList.community">
          <template #left>
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
          </template>
        </van-nav-bar>
      </div>
      <div>
        <!-- 轮播图 -->
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          height="245"
        >
          <van-swipe-item
            v-for="(item, index) in CityMesgList.houseImg"
            :key="index"
          >
            <img
              :src="`http://liufusong.top:8080${item}`"
              alt=""
              :style="{ width: '100%' }"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 房屋信息 -->
      <div class="RoomMesg">
        <van-card
          :desc="CityMesgList.title"
          :style="{ backgroundColor: '#fff' }"
        >
          <template #tags>
            <van-tag
              type="danger"
              color="#e1f5f8"
              text-color="#39becd"
              size="large"
              v-for="(item, index) in CityMesgList.tags"
              :key="index"
              >{{ item }}</van-tag
            >
          </template>
        </van-card>
        <!-- 分割符 -->
        <van-divider
          :style="{ color: '#1989fa', borderColor: '#999', padding: '0 16px' }"
        />
      </div>
      <!-- 租金，房型，面积 -->
      <div class="RoomMore">
        <div>
          <span>{{ CityMesgList.price }}<span class="yue">/月</span></span>
          <p>租金</p>
        </div>
        <div>
          <span>{{ CityMesgList.roomType }}</span>
          <p>房型</p>
        </div>
        <div>
          <span>{{ CityMesgList.size }}平米</span>
          <p>面积</p>
        </div>
      </div>
      <!-- 分割符 -->
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#999', padding: '0 16px' }"
      />
      <!-- 房屋简介 -->
      <div class="RoomRes">
        <div>
          <span>装修:</span><span>精装</span> <br />
          <span>楼层:</span><span>{{ CityMesgList.floor }}</span>
        </div>
        <div>
          <span>朝向:</span
          ><span v-for="(item, index) in CityMesgList.oriented" :key="index">{{
            item
          }}</span>
          <br />
          <span>类型:</span><span>普通住宅</span>
        </div>
      </div>
      <!-- 小区地图 -->
      <div>
        <div class="Separator">
          <van-divider :style="{ borderColor: '#f6f5f6' }"/>
        </div>
        <!-- 小区名 -->
        <div class="area">小区: {{area}}</div>
        <!-- 地图 -->
        <div class="AreaMap">
          <baidu-map class="map" :center="center" @ready="handler" :zoom="18">
            <bm-overlay
            pane="labelPane"
            @draw="draw"
            :class="{sample: true}"
            class="dad"
            >
            <div>
              {{CityMesgList.community}}
            </div>
            </bm-overlay>
          </baidu-map>
        </div>
        <!-- 房屋配套，icon，txt -->
        <span class="area">房屋配套</span>
        <van-divider :style="{ color: '#1989fa', borderColor: '#dddddd', padding: '0 16px' }"/>
        <van-grid column-num="5" :border="false">
        <van-grid-item :icon="CityMesgList.supporting.length ? 'hotel-o' : ''" :text="Supitem.name || '暂无'"
        v-for="(Supitem,Supindex) in CitySupporting" :key="Supindex">
        <template #icon>
          <i :class="CitySupporting.length ? Supitem.class : '' "></i>
        </template>
      </van-grid-item>
      </van-grid>
      <!-- 房屋概况，房主，详情 -->
      <span class="area">房源概况</span>
      <van-divider :style="{ color: '#1989fa', borderColor: '#dddddd', padding: '0 16px' }"/>
      <div class="Landlord">
        <van-card
          title="王女士"
          thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmaterials.cdn.bcebos.com%2Fimages%2F53673938%2F59571fcd8728187a65c9e36ac0803515.jpeg&refer=http%3A%2F%2Fmaterials.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667220591&t=62ce1fbc054897eb0faa14723007ffd8"
        >
        <template #desc>
          <div class="UserReg">
          <van-icon name="shield-o" />
          <span>已认证房主</span>
        </div>
        </template>
        <template #footer>
          <div class="Btn">
            <van-button plain type="primary" size="small">发消息</van-button>
        </div>
        </template>
      </van-card>
      </div>
      <!-- 房屋介绍 -->
      <div class="survey">
        <h6 class="area">{{survey}}</h6>
      </div>
      <!-- 分隔符 -->
      <div class="Separator">
          <van-divider :style="{ borderColor: '#f6f5f6' }"/>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div>
        <h6 class="area">猜你喜欢</h6>
      </div>
      <van-divider :style="{ borderColor: '#dddddd', padding: '0px 16px 10px 16px' }"/>
      <div>
        <van-card
          :price="`${item.price}元/月`"
          :desc="item.desc"
          :title="item.title"
          class="goods-card"
          centered
          currency
          :thumb="`http://liufusong.top:8080${item.houseImg}`"
          v-for="(item,index) in GuessLikeList" :key="index"
          @click="Houses(item)"
        >
          <template #tags>
            <van-tag
              color="#e1f5f8"
              text-color="#39becd"
              v-for="(item,index) in item.tags" :key="index"
            >
             {{item}}</van-tag
            >
          </template>
        </van-card>
      </div>
    </div>
    <!-- 底部固定导航 -->
    <div class="BtnNav">
      <van-button type="default" @click="Star"> <van-icon name="star-o" :color="icon"/> 收藏</van-button>
      <van-button type="default">在线咨询</van-button>
      <van-button type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import { HouseMesgRequest, StarHouseRequest, HouseRequest } from '@/api'

export default {
  data () {
    return {
      // 猜你喜欢
      GuessLikeList: [],
      // 图标颜色
      icon: '#333',
      // 地图位置
      center: {
        lng: '',
        lat: ''
      },
      // 房屋详细信息数据
      CityMesgList: [],
      CitySupporting: [],
      // 小区名
      area: '天山星城',
      survey: '',
      obj: {
        title: '好客租房',
        message: '您还未登录，是否跳转到登录页面？',
        confirmButtonText: '跳转',
        cancelButtonText: '取消',
        url: '/login'
      }
    }
  },
  async mounted () {
    // 是否已收藏
    if (!this.$store.state.LoginState || !this.$store.state.token) return
    const res = await StarHouseRequest(this.$store.state.houseCode, 'GET')
    console.log(res)
    if (res.data.body.isFavorite === true) {
      this.icon = 'red'
    } else {
      this.icon = ''
    }
  },
  methods: {
    async handler ({ BMap, map }) {
      this.$store.state.UserOverlay = true
      // 加载状态
      this.$bus.$emit('loading')
      try {
        // 房屋详细数据
        const res = await HouseMesgRequest(localStorage.getItem('houseId'))
        this.CityMesgList = res.data.body
        console.log(this.CityMesgList)
        // 处理房屋配置数据
        this.CitySupporting = this.$store.state.HouseIcon.filter((item) => {
          const b = this.CityMesgList.supporting.some((i) => item.name === i)
          return b
        })
        // 猜你喜欢房屋推荐
        const res1 = await HouseRequest({
          NewHouse: this.$store.state.NowCityOlny[0].value || this.$store.state.NowCityOlny,
          Money: this.CityMesgList.price,
          start: 1,
          end: 3
        })
        this.GuessLikeList = res1.data.body.list
        // 拿到地理位置
        this.center.lng = res.data.body.coord.longitude
        this.center.lat = res.data.body.coord.latitude
        // 加载完毕关闭加载窗
        this.$bus.$emit('clear')
        this.$store.state.UserOverlay = false
      } catch (err) {
        this.$bus.$emit('fail')
        this.$store.state.UserOverlay = false
      }
    },
    // 地图配置
    draw ({ el, BMap, map }) {
      const { lng, lat } = this.center
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    async Star (e) {
      // 判断是否登录
      if (this.$store.state.LoginState) {
        // 判断收藏↓
        try {
          const res = await StarHouseRequest(this.CityMesgList.houseCode, 'GET')
          console.log(res.data.body)
          if (res.data.body.isFavorite === false) {
            console.log(await StarHouseRequest(this.CityMesgList.houseCode, 'POST'))
            this.icon = 'red'
          } else {
            console.log(await StarHouseRequest(this.CityMesgList.houseCode, 'DELETE'))
            this.icon = ''
          }
        } catch (err) {
          console.log(err)
        }
      } else {
        // 未登录提示框
        this.$store.commit('dialog', this.obj)
      }
    },
    // 跳转猜你喜欢房屋详细信息页面
    Houses (item) {
      location.reload()
      this.$store.commit('houseId', item.houseCode)
      this.$router.push({
        path: '/detail'
      })
    }
  },
  watch: {
    // 清除描述括号内容以及括号
    CityMesgList: {
      handler () {
        setTimeout(() => {
        // eslint-disable-next-line no-useless-escape
          this.survey = this.CityMesgList.description.replace(/\【.*?\】/g, '')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
  /deep/ .van-icon {
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
.van-card {
  /deep/ .van-card__desc {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0;
  }
}
.RoomMore {
  display: flex;
  line-height: 120%;
  text-align: center;
  justify-content: space-around;

  p {
    color: #999;
    font-size: 14px;
  }
  span {
    font-weight: 700;
    font-size: 18px;
    color: #fa5741;
    .yue {
      font-size: 14px;
    }
  }
}
.RoomRes {
  display: flex;
  margin: 0 20px 0 -20px;
  font-size: 15px;
  line-height: 190%;
  justify-content: space-around;
  span {
    margin: 0 8px;
  }
}
.Separator{
  /deep/ .van-divider {
    height: 15px;
    background-color: #f6f5f6;
  }
}
.area{
  font-size: 14px;
  padding:0 0 10px 10px;
}
// 地图
.AreaMap{
  height: 145px;
  // background-color: pink;
  padding-bottom: 10px;
  .map {
  width: 100%;
  height: 100%;
}
}
.Landlord{
  height: 90px;
  /deep/ .van-card{
  background-color: #fff;

  }
  /deep/ .van-card__thumb{
  background-color: pink;

    width:65px;
  height: 65px;
  }
  /deep/ .van-card__title{
    margin-bottom:5px;
  }
  /deep/ .UserReg{
    color: red;
  }
  /deep/ .Btn{
    margin-top: -80px;
  }
}
.survey{
  min-height: 100px;
}
.BtnNav{
  display: flex;
  width:100%;
  .van-button{
    flex:1;
    height:50px;
    font-size: 18px;
  }
}
.sample {
  min-width: 100px;
  line-height: 15px;
  background: rgba(255, 0, 0, 0.644);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  font-size: 14px;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
/deep/ .IconBgc{
background-color: rgb(255, 0, 0) !important;
}
/deep/ .van-card__price-integer{
  color:red;
}
/deep/ .van-grid-item__content{
font-size: 20px;
transform: scale(1.3)
}
</style>
